<template>
	<view class="box" :style="theme">
		<view v-for="(item, index) in list" :key="index" class="content flex_between flex" :style="{backgroundImage: (index%2)===0?'url(' + bja + ')':'url(' + bjb + ')'}" @click="jumpBtn(item)">
			<image :src="item.courseImage" class="left"></image>
			<view class="right">
				<view class="xbt">{{item.courseName}}</view>
				<view class="js flex_between flex">
					<text v-if="item.courseEndDate">有效期至 {{item.courseEndDate}}</text>
					<text v-if="item.termDate">到期时间 {{item.termDate}}</text>
					<text>剩余：{{item.syNum || 0}}课时</text>
				</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无课程包～</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				end: false,
				noMore: false,
				status: 'nomore',
				firstQueryTime: '',
				bja: 'http://zhcg-pro.oss-cn-hangzhou.aliyuncs.com/xiaochengxuditu/chanpin_bg_a.png',
				bjb: 'http://zhcg-pro.oss-cn-hangzhou.aliyuncs.com/xiaochengxuditu/chanpin_bg_b.png'
			}
		},
		onLoad() {
			this.firstQueryTime = this.$app.firstQueryTime()
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jumpBtn(item) {
				if(item.courseFlag == 1) {
					this.jump('/pages/curriculum/detailb?id=', item.courseId)
				} else {
					this.jump('/pages/member/productDetail?id=',item.id + '&studentId=' + item.studentId)
				}
			},
			getList() {
				this.$app.ajax({
					api: this.$api.getProduct(),
					data: {
						pagination: {
							page: this.page,
							firstQueryTime: this.firstQueryTime,
							rows: 15
						},
						param: {}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 15) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>
<style scoped lang="scss">
	.content {
		width: 690rpx;
		height: 184rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		padding: 40rpx;
		.left {
			width: 88rpx;
			height: 88rpx;
			flex: none;
			margin-right: 24rpx;
			border-radius: 50%;
		}
		.right {
			flex: 1;
			color: #FFFFFF;
			font-size: 24rpx;
			.xbt {
				font-size: 34rpx;
				margin-bottom: 10rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: bolder;
				color: #FFFFFF;
			}
		}
	}
</style>
